<template>
	<view class="content">
		<u-sticky :offsetTop="0" :customNavHeight="0">
			<view class="info-con">
				<view class="user-lista">
					<u-avatar :src="src" size="55"></u-avatar>
					<view class="list-texta">
						<view style="font-weight: 500;color: #fff;font-size: 31rpx;">
							<u--text color="#fff" mode="name" :text="selectUser.patientName" format="encrypt"></u--text>
						</view>
						<view v-if="selectUser.patientName">
							就诊卡号：{{selectUser.patientCard.substr(0, 1) + '****************'+selectUser.patientCard.substr(-1, 1)}}
						</view>
						<view>证件类型：身份证</view>
					</view>
					<view class="user-buta" @click="show=true">更换就诊人</view>
				</view>
				<!-- <view class="tab">
					<u-tabs :list="list" :scrollable="false" :current="current" @click="seletTab"></u-tabs>
				</view> -->
			</view>
		</u-sticky>
		<view class="record-list" v-for="(item,index) in dataList" :key="index">
			<view class="record-item">
				<view class="doctor-bom">
					<view style="margin-top: 8rpx; display: flex;align-items: center;">就诊医生：
						<text style="color: #000000;">{{item.admDoctor}}</text>
						<text style="color: #000000;margin-left: 10rpx;">({{item.admDept}})</text>


					</view>
					<view style="margin-top: 8rpx;">就诊日期：<text style="color: #000000;">{{item.admDateTime}}</text>
					</view>
					<view style="margin-top: 8rpx;">消费金额：<text style="color: #FF1212;">￥{{item.admTotalMoney}}</text>
					</view>
				</view>
				<view class="name-but" @click="goResult(item)">在线缴费</view>
			</view>
			<view style="width: 712rpx;margin: 0 auto;margin-top: 23rpx;">
				<uni-table ref="table" border stripe>
					<uni-tr>
						<uni-th width="280rpx" align="center">名称</uni-th>
						<uni-th width="120rpx" align="center">单价</uni-th>
						<uni-th width="120rpx" align="center">数量</uni-th>
						<uni-th width="120rpx" align="center">总价</uni-th>
					</uni-tr>
					<uni-tr v-for="(itema, indexa) in item.itemList" :key="indexa">
						<uni-td align="center">{{ itema.itemName }}</uni-td>
						<uni-td align="center">
							<view style="color: #FF1212;">¥{{itema.itemPrice}}</view>
						</uni-td>
						<uni-td align="center">{{ itema.itemCount }}</uni-td>
						<uni-td align="center">
							<view style="color: #FF1212;">¥{{itema.itemTotalMoney}}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
		<view v-if="isEmpty" class="refund-empty">
			<image src="../../static/img/noRecords.png" style="width: 615rpx;height: 615rpx;"></image>
			<view style="margin-top: 15rpx;">暂无待缴费</view>
		</view>
		<u-popup :show="show" mode="bottom" :round="10" @close="show = false">
			<view class="pop-con">
				<view class="pop-title">选择就诊人</view>
				<scroll-view scroll-y="true" class="scroll-y">
					<view class="user-list" v-for="(item,index) in userList" :key="index">
						<u-avatar :src="src" size="55"></u-avatar>
						<view class="list-text">
							<view style="font-weight: 500;color: #000000;font-size: 31rpx;">
								<u--text mode="name" :text="item.patientName" format="encrypt"></u--text>
							</view>
							<view>
								就诊卡号：{{item.patientCard.substr(0, 1) + '****************'+item.patientCard.substr(-1, 1)}}
							</view>
							<view>证件类型：身份证</view>
						</view>
						<view style="margin-left: auto;width: 128rpx;">
							<u-button type="primary" :plain="true" shape="circle" text="确定"
								@click="changeUser(item)"></u-button>

						</view>
					</view>
				</scroll-view>
				<view class="book-but">
					<u-button type="primary" text="添加就诊人"
						@click="goPage('/pages/bookbuilding/bookbuilding')"></u-button>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		userlistApi,
		costpayApi,
	} from "@/api/user"

	export default {
		data() {
			return {
				isEmpty: false,
				dataList: [],
				src: '',
				show: false,
				current: 0,
				time: '',
				selectUser: '',
				userList: [],
				list: [{
						name: '近三天',
						type: 0
					},
					{
						name: '近七天',
						type: 1
					},
					{
						name: '近一个月',
						type: 1
					},
				]
			}
		},
		// onLoad() {
		// 	this.getUser()
		// },
		onShow() {
			this.getUser()
		},
		methods: {

			async getUser() {
				let userInfo = uni.getStorageSync('userInfo')
				const res = await userlistApi({
					userId: userInfo.id,
					pageNum: 1,
					pageSize: 100,
					patientType: 1
				})
				this.userList = res.rows
				if (uni.getStorageSync('selectUser')) {
					this.selectUser = uni.getStorageSync('selectUser')


				} else {
					this.selectUser = this.userList[0]
					uni.setStorageSync('selectUser', this.userList[0])
				}
				this.getList()

			},
			async getList() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.dataList = []
					this.isEmpty = false
					const res = await costpayApi({
						id: this.selectUser.id,
					})
					this.dataList = res.data
					uni.hideLoading()
					// this.isEmpty = !this.dataList.length
				} catch (e) {
					console.log('errro', e);
					uni.hideLoading()
					this.isEmpty = true
				}


			},
			changeUser(item) {
				this.selectUser = item
				uni.setStorageSync('selectUser', item)
				this.getList()
				this.show = false
			},
			goResult(item) {
				let data = {
					id: this.selectUser.id,
					name: this.selectUser.patientName,
					card: this.selectUser.patientCard,
					admDoctor: item.admDoctor,
					admDept: item.admDept,
					admTotalMoney: item.admTotalMoney,
					admDateTime: item.admDateTime,
					receiptNo: item.receiptNo,
				}
				uni.navigateTo({
					// url: `/pages/paymentreslut/paymentreslut?name=${this.selectUser.patientName}
					// &card=${this.selectUser.patientCard}&admDoctor=${item.admDoctor}&
					// admDept=${item.admDept}&admTotalMoney=${item.admTotalMoney}
					// &admDateTime=${item.admDateTime}`
					url: '/pages/paymentreslut/paymentreslut?item=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			seletTab() {},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100%;
		box-sizing: border-box;
		background: #F8F8F8;
		color: #666666;
		font-size: 27rpx;
		padding-bottom: calc(23px + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.info-con {
		width: 750rpx;
		padding: 23rpx 31rpx;
		padding-top: 23rpx;
		box-sizing: border-box;
		background: #FFFFFF;
	}



	.user-lista {
		width: 688rpx;
		height: 185rpx;
		background: linear-gradient(135deg, #05A2FF 0%, #0CCFFF 100%);
		border-radius: 19rpx;
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}

	.list-texta {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.user-buta {
		margin-left: auto;
		width: 146rpx;
		height: 62rpx;
		background: #FFFFFF;
		border-radius: 31rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #05A2FF;
	}


	.pop-con {
		padding: 31rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pop-title {
		width: 100%;
		text-align: center;
		font-weight: 500;
		color: #000000;
		font-size: 31rpx;
	}

	.scroll-y {
		height: 400rpx;
		width: 688rpx;
		margin-top: 31rpx;
		box-sizing: border-box;
	}

	.user-list {
		width: 688rpx;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		padding-left: 19rpx;
		padding-right: 29rpx;
		padding-top: 23rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 23rpx;
		box-shadow: 0px 0 13rpx 0px rgba(5, 162, 255, 0.11);
		color: #999999;
		font-size: 23rpx;
	}

	.list-text {
		height: 100%;
		margin-left: 23rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}

	.book-but {
		width: 688rpx;
		height: 85rpx;
		margin: 0 auto;
		margin-top: 31rpx;
	}

	.refund-empty {
		margin-top: 52rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999999;
		font-size: 27rpx;

	}

	.log-list {
		display: flex;
		align-items: center;
		width: 688rpx;
		padding: 31rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: #000000;
		font-size: 27rpx;
		margin-top: 23rpx;
	}

	.record-list {
		width: 730rpx;
		margin: 0 auto;
		border-radius: 19rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		margin-top: 23rpx;
		padding: 23rpx 0;
	}

	.record-item {
		padding: 0 31rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.name-but {
		margin-left: auto;
		width: 138rpx;
		height: 62rpx;
		background: #05A2FF;
		border-radius: 31rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 23rpx;
	}


	.doctor-bom {
		color: #999999;
		font-size: 27rpx;
	}
</style>